import React from 'react';
import { connect } from 'dva';
import moment from 'moment';


class VisitedRecord extends React.Component {

  state={
    editVisitRecdsStatus: false,
  }

  getWay=(way) => {
    if (way === 1) {
      return '电话';
    } else if (way === 2) {
      return '短信';
    } else if (way === 3) {
      return '微信';
    }
  }

  editVisitRecds=(id) => {
    if (this.state.editVisitRecdsStatus) {
      const remark = this.editInput.value;
      this.props.dispatch({
        type: 'task/editVisitRecds',
        payload: { id, remark },
      });
    }
    this.setState(prevState => ({
      editVisitRecdsStatus: !prevState.editVisitRecdsStatus,
    }));
  }

  render() {
    const { visitedRecord } = this.props.task;
    return (
      <div>
        {
          visitedRecord.map((item, index) => (
            <div key={index} style={{ lineHeight: '1.6em', borderBottom: '1px solid gray', padding: '0.5em 0.3rem' }}>
              <div>任务类型：{item.typeLabel || ''}</div>
              <div>回访时间：{moment(item.oper_date).utc(true).format('YYYY-MM-DD HH:mm:ss')}</div>
              <div>回访方式：{this.getWay(item.way)}</div>
              <div>回访结果：{item.complete === 1 ? '成功' : '失败'}</div>
              {
                  item.complete === 2 && item.reason &&
                  <div>
                    失败原因：{item.reason}
                  </div>
                }
              <div>
                  备注：
                  {
                    this.state.editVisitRecdsStatus ?
                      <input ref={(el) => { this.editInput = el; }} defaultValue={item.remark} style={{ width: '3rem' }} type="text" /> :
                      <span style={{ width: '3rem', display: 'inline-block' }}>{item.remark}</span>
                  }
                <button onClick={this.editVisitRecds.bind(this, item._id)} style={{ marginLeft: '1em', backgroundColor: 'rgb(79,161,197)', border: 'none', borderRadius: '0.15rem 0.15rem', color: 'white', padding: '0.3em 0.8em' }} >{this.state.editVisitRecdsStatus ? '提交' : '修改'}</button>
              </div>
            </div>
            ),
          )
        }
      </div>
    );
  }
}

export default connect(({ task }) => ({ task }))(VisitedRecord);
